$block-spacing: 30px;

.homePage{
    width: 100%;
    height: 100%;
    overflow: auto;
    &-content{
        .homePage-guide{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .homePage-guide-title{
            font-weight: var(--tiklab-font-weight-bold);
        }
        .home-recent{
            border-radius: 4px;
            background: #fff;
            margin-bottom: $block-spacing;
            .pipelineRecent-content{
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                overflow: hidden;
                height: 120px;
                padding-top: 10px;
                gap: 10px;
            }
            .pipelineRecent-item{
                flex: 1;
                height: 110px;
                padding: 10px;
                max-width: calc(100% / 4);
                min-width: 210px;
                border-radius: 4px;
                cursor: pointer;
                background-color: var(--arbess-backdrop-color);
                border-bottom: 2px solid transparent;
            }
            .pipelineRecent-item:hover{
                border-radius: 4px 4px 0 0;
                border-bottom-color: var(--tiklab-blue);
                transition: 1s;
            }
            .pipelineRecent-item-title{
                padding-bottom: var(--tiklab-padding-item);
                display: flex;
                flex-direction: row;
                align-items: center;
                .pipelineRecent-name{
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                    font-weight: var(--tiklab-font-weight-bold);
                }
            }
            .pipelineRecent-item-details{
                font-size: var(--tiklab-font-13);
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                .details-desc{
                    color: #9b9b9b;
                    padding-right: 8px;
                }
            }
            .pipelineRecent-item-detail{
                padding: 10px 0;
                &:first-child{
                    margin-right: 30px;
                }
            }
        }

        .home-statistics{
            margin-bottom: $block-spacing;
            .home-statistics-release{
                background-color: var(--arbess-backdrop-color);
                border-radius: 4px;
                padding: 20px 10px 10px;
                margin-top: 15px;
            }
        }

        .home-release{
            margin-bottom: $block-spacing;
            .home-release-content{
                display: flex;
                gap: 10px;
                padding-top: 10px;
                .home-release-title{
                    padding-bottom: 10px;
                    text-align: center;
                    font-weight: var(--tiklab-font-weight-bold);
                }
                .home-release-pipeline,.home-release-user{
                    flex: 1;
                    background-color: var(--arbess-backdrop-color);
                    border-radius: 4px;
                    padding: 15px 10px;
                    min-height: 400px;
                    .home-release-link{
                        .arbess-listname-icon{
                            width: 24px;
                            height: 24px;
                            line-height: 24px;
                            font-size: 12px;
                        }
                        &:hover{
                            color: var(--tiklab-blue);
                            cursor: pointer;
                            text-decoration: underline;
                        }
                        .home-release-link-text{
                            padding-left: 5px;
                        }
                    }
                    .home-release-user-name{
                        display: inline-flex;
                        align-items: center;
                        .home-release-user-name-text{
                            padding-left: 5px;
                        }
                        .ant-avatar{
                            width: 24px;
                            height: 24px;
                        }
                    }
                    .home-release-success{
                        color: var(--tiklab-blue);
                    }
                    .home-release-error{
                        color: #f06f6f;
                    }
                }
                .ant-table{
                    border: none;
                    background: transparent;
                    .ant-table-thead > tr > th{
                        background: transparent;
                    }
                    .ant-table-tbody > tr:hover td{
                        background: var(--arbess-hover-color);
                    }
                }
            }
        }
    }
}
